<template>
  <div class="h-10 bg-[#252526] border-b border-[#323232] flex items-center px-4">
    <!-- 左侧菜单组 -->
    <div class="flex items-center space-x-2">
      <!-- Logo -->
      <div class="w-8 h-8 flex items-center justify-center">
        <svg class="w-6 h-6 text-[#4EC9B0]" viewBox="0 0 24 24" fill="currentColor">
          <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
        </svg>
      </div>

      <!-- 文件菜单 -->
      <div class="relative">
        <button
          @click="isFileMenuOpen = !isFileMenuOpen"
          class="px-3 h-8 rounded text-[#CCCCCC] hover:bg-[#2A2D2E] active:bg-[#37373D] transition-colors flex items-center space-x-1 text-sm"
          :class="{ 'bg-[#37373D]': isFileMenuOpen }"
        >
          <span>File</span>
          <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </button>
        
        <!-- 文件菜单下拉框 -->
        <div
          v-if="isFileMenuOpen"
          class="absolute top-9 left-0 bg-[#2D2D2D] border border-[#323232] rounded shadow-lg py-1 min-w-[200px] z-50"
        >
          <button 
            @click="handleOpenDirectory"
            class="w-full px-4 py-1.5 text-sm text-[#CCCCCC] hover:bg-[#3D3D3D] text-left flex items-center justify-between group"
          >
            <span>Open Folder...</span>
            <span class="text-[#8E8E8E] text-xs">Ctrl+K Ctrl+O</span>
          </button>
          
          <div class="h-px bg-[#323232] my-1"></div>
          
          <button 
            class="w-full px-4 py-1.5 text-sm text-[#CCCCCC] hover:bg-[#3D3D3D] text-left flex items-center justify-between group"
          >
            <span>New File</span>
            <span class="text-[#8E8E8E] text-xs">Ctrl+N</span>
          </button>
          
          <button 
            class="w-full px-4 py-1.5 text-sm text-[#CCCCCC] hover:bg-[#3D3D3D] text-left flex items-center justify-between group"
          >
            <span>Save</span>
            <span class="text-[#8E8E8E] text-xs">Ctrl+S</span>
          </button>
        </div>
      </div>

      <!-- 设置菜单 -->
      <div class="relative">
        <button
          class="px-3 h-8 rounded text-[#CCCCCC] hover:bg-[#2A2D2E] active:bg-[#37373D] transition-colors flex items-center space-x-1 text-sm"
        >
          <span>Settings</span>
          <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </button>
      </div>
    </div>

    <!-- 右侧工具组 -->
    <div class="ml-auto flex items-center space-x-2">
      <!-- 运行配置选择器 -->
      <select class="h-8 bg-[#3C3C3C] text-[#CCCCCC] rounded px-3 text-sm focus:outline-none focus:ring-1 focus:ring-[#4EC9B0] cursor-pointer hover:bg-[#3F3F3F] transition-colors appearance-none">
        <option value="dev">dev</option>
        <option value="build">build</option>
        <option value="preview">preview</option>
      </select>

      <!-- 运行按钮 -->
      <button 
        class="h-8 flex items-center space-x-2 px-3 bg-[#3C3C3C] hover:bg-[#4A4A4A] text-[#CCCCCC] rounded transition-colors group"
      >
        <svg class="w-4 h-4 text-[#4EC9B0] group-hover:text-[#5EDAC0] transition-colors" viewBox="0 0 24 24" fill="currentColor">
          <path d="M8 5v14l11-7z"/>
        </svg>
        <span class="text-sm">Run</span>
      </button>

      <!-- 调试按钮 -->
      <button 
        class="h-8 flex items-center space-x-2 px-3 hover:bg-[#2A2D2E] text-[#CCCCCC] rounded transition-colors group"
      >
        <svg class="w-4 h-4 text-[#CCCCCC] group-hover:text-[#4EC9B0] transition-colors" viewBox="0 0 24 24" fill="currentColor">
          <path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/>
        </svg>
        <span class="text-sm">Debug</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { open } from '@tauri-apps/plugin-dialog'

const isFileMenuOpen = ref(false)

const handleOpenDirectory = async () => {
  try {
    const selected = await open({
      directory: true,
      multiple: false
    })
    
    if (selected) {
      emit('directory-selected', selected)
      isFileMenuOpen.value = false
    }
  } catch (error) {
    console.error('Failed to open directory:', error)
    // 可以添加一些用户友好的错误提示
  }
}

const emit = defineEmits(['directory-selected'])
</script>